<template>
  <div class="dashboard-home">
    <!-- 欢迎卡片 -->
    <div class="welcome-card">
      <div class="welcome-content">
        <h2 class="welcome-title">欢迎回来！</h2>
        <p class="welcome-text">
          欢迎使用 BoomShake 卡座预约系统管理后台
        </p>
        <div class="admin-summary">
          <div class="summary-item">
            <span class="summary-label">登录账号：</span>
            <span class="summary-value">{{ adminInfo?.username || 'admin' }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">管理员：</span>
            <span class="summary-value">{{ adminInfo?.realName || '超级管理员' }}</span>
          </div>
          <div class="summary-item">
            <span class="summary-label">最后登录：</span>
            <span class="summary-value">{{ formatTime(adminInfo?.lastLoginAt || new Date()) }}</span>
          </div>
        </div>
      </div>
      <div class="welcome-illustration">
        <div class="illustration-bg">
          <svg viewBox="0 0 200 200" class="welcome-icon">
            <circle cx="100" cy="100" r="80" fill="url(#gradient1)" opacity="0.8"/>
            <circle cx="100" cy="100" r="60" fill="url(#gradient2)" opacity="0.6"/>
            <circle cx="100" cy="100" r="40" fill="white" opacity="0.9"/>
            <path d="M85,85 L95,105 L115,75" stroke="#5856d6" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
            <defs>
              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#5856d6"/>
                <stop offset="100%" style="stop-color:#228B22"/>
              </linearGradient>
              <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#228B22"/>
                <stop offset="100%" style="stop-color:#5856d6"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
    </div>

    <!-- 统计概览 -->
    <div class="stats-overview">
      <div class="stat-card">
        <div class="stat-icon stores">
          <svg viewBox="0 0 24 24">
            <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">12</h3>
          <p class="stat-label">门店总数</p>
          <span class="stat-change positive">+2 本月新增</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon users">
          <svg viewBox="0 0 24 24">
            <path d="M16,4C18.11,4 19.61,5.29 20.19,7H22V9H20.19C19.61,10.71 18.11,12 16,12C13.89,12 12.39,10.71 11.81,9H2V7H11.81C12.39,5.29 13.89,4 16,4M16,6A2,2 0 0,0 14,8A2,2 0 0,0 16,10A2,2 0 0,0 18,8A2,2 0 0,0 16,6Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">1,568</h3>
          <p class="stat-label">用户总数</p>
          <span class="stat-change positive">+86 本月新增</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon distributors">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">73</h3>
          <p class="stat-label">分销员数量</p>
          <span class="stat-change positive">+12 本月新增</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon revenue">
          <svg viewBox="0 0 24 24">
            <path d="M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">￥68,520</h3>
          <p class="stat-label">本月总佣金</p>
          <span class="stat-change positive">+15.8% 环比上月</span>
        </div>
      </div>
    </div>

    <!-- 最近活动和快捷操作 -->
    <div class="dashboard-grid">
      <!-- 最近活动 -->
      <div class="recent-activities">
        <div class="section-header">
          <h3 class="section-title">最近活动</h3>
          <router-link to="/admin/activities" class="section-link">查看全部</router-link>
        </div>
        <div class="activity-list">
          <div class="activity-item" v-for="n in 5" :key="n">
            <div class="activity-info">
              <h4 class="activity-name">狂欢夜 - 电音盛宴{{ n }}</h4>
              <p class="activity-date">2024-12-{{ 20 + n }} 21:00</p>
            </div>
            <div class="activity-status">
              <span class="status-badge" :class="n % 2 === 0 ? 'ongoing' : 'upcoming'">
                {{ n % 2 === 0 ? '进行中' : '即将开始' }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷操作 -->
      <div class="quick-actions">
        <div class="section-header">
          <h3 class="section-title">快捷操作</h3>
        </div>
        <div class="action-grid">
          <router-link to="/admin/stores" class="action-item">
            <div class="action-icon stores">
              <svg viewBox="0 0 24 24">
                <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"/>
              </svg>
            </div>
            <span class="action-text">门店管理</span>
          </router-link>
          
          <router-link to="/admin/users" class="action-item">
            <div class="action-icon users">
              <svg viewBox="0 0 24 24">
                <path d="M16,4C18.11,4 19.61,5.29 20.19,7H22V9H20.19C19.61,10.71 18.11,12 16,12C13.89,12 12.39,10.71 11.81,9H2V7H11.81C12.39,5.29 13.89,4 16,4M16,6A2,2 0 0,0 14,8A2,2 0 0,0 16,10A2,2 0 0,0 18,8A2,2 0 0,0 16,6Z"/>
              </svg>
            </div>
            <span class="action-text">用户管理</span>
          </router-link>
          
          <router-link to="/admin/activities" class="action-item">
            <div class="action-icon activities">
              <svg viewBox="0 0 24 24">
                <path d="M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z"/>
              </svg>
            </div>
            <span class="action-text">活动管理</span>
          </router-link>
          
          <router-link to="/admin/withdrawals" class="action-item">
            <div class="action-icon withdrawals">
              <svg viewBox="0 0 24 24">
                <path d="M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z"/>
              </svg>
            </div>
            <span class="action-text">佣金提现</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAdminInfo } from '../api/auth'

const adminInfo = ref(null)

const formatTime = (time) => {
  if (!time) return '暂无记录'
  const date = new Date(time)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

onMounted(async () => {
  try {
    const response = await getAdminInfo()
    adminInfo.value = response.data
  } catch (error) {
    console.error('获取管理员信息失败:', error)
  }
})
</script>

<style scoped>
.dashboard-home {
  max-width: 1400px;
  margin: 0 auto;
}

/* 欢迎卡片 */
.welcome-card {
  background: linear-gradient(135deg, #5856d6, #228B22);
  border-radius: 16px;
  padding: 40px;
  color: white;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.welcome-content {
  flex: 1;
  z-index: 2;
}

.welcome-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.welcome-text {
  font-size: 1.1rem;
  margin: 0 0 25px 0;
  opacity: 0.9;
}

.admin-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.summary-value {
  font-weight: 600;
  font-size: 0.9rem;
}

.welcome-illustration {
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 1;
}

.illustration-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-icon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* 统计概览 */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 28px;
  height: 28px;
  fill: white;
}

.stat-icon.stores {
  background: linear-gradient(135deg, #5856d6, #7c3aed);
}

.stat-icon.users {
  background: linear-gradient(135deg, #228B22, #16a34a);
}

.stat-icon.distributors {
  background: linear-gradient(135deg, #f59e0b, #eab308);
}

.stat-icon.revenue {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #2d3748;
}

.stat-label {
  font-size: 0.95rem;
  color: #718096;
  margin: 0 0 6px 0;
}

.stat-change {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
}

.stat-change.positive {
  background: rgba(34, 139, 34, 0.1);
  color: #16a34a;
}

/* 仪表板网格 */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* 最近活动 */
.recent-activities,
.quick-actions {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f1f5f9;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: #2d3748;
}

.section-link {
  color: #5856d6;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.section-link:hover {
  color: #4c51bf;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
  transition: all 0.2s;
}

.activity-item:hover {
  background: #f1f5f9;
}

.activity-name {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 5px 0;
  color: #2d3748;
}

.activity-date {
  font-size: 0.8rem;
  color: #718096;
  margin: 0;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-badge.ongoing {
  background: rgba(88, 86, 214, 0.1);
  color: #5856d6;
}

.status-badge.upcoming {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* 快捷操作 */
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: #f8fafc;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.action-item:hover {
  background: white;
  border-color: #e2e8f0;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.action-icon svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.action-icon.stores {
  background: linear-gradient(135deg, #5856d6, #7c3aed);
}

.action-icon.users {
  background: linear-gradient(135deg, #228B22, #16a34a);
}

.action-icon.activities {
  background: linear-gradient(135deg, #f59e0b, #eab308);
}

.action-icon.withdrawals {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.action-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: #4a5568;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-overview {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .welcome-card {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }
  
  .welcome-illustration {
    width: 150px;
    height: 150px;
    margin-top: 20px;
  }
  
  .stats-overview {
    grid-template-columns: 1fr;
  }
  
  .action-grid {
    grid-template-columns: 1fr;
  }
}
</style> 